<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<style type="text/css">
			div {
				width: 300px;
				height: 200px;
				box-sizing: border-box;
			}

			main {
				border: 2px solid black;
				width: 620px;
				height: 220px;
				margin: 0 auto;
				padding: 20px;
				/* background-color: #CCCCCC; */
				background-color: antiquewhite;

				background-clip: content-box;

			}


			div:nth-of-type(1) {
				border: solid 1px red;
				float: left;
			}

			div:nth-of-type(2) {
				/* background: blue; */

				border: 1px solid black;
				/* float: right; */

				float: left;
				margin-left: 20px;

			}

			span {
				border: 2px solid blue;
				;
				width: 300px;
				height: 50px;
				float: left;

			}

			span:nth-of-type(2) {
				float: right;
			}
		</style>
	</head>
	<body>

		<!-- 
		 float 浮动 
		 
		 浮动后 会影响 后面的元素 ，前面的元素不会受到影响的。
		 
		 
		行级元素浮动后转为块元素,可以像块元素一样设置，但一般出于语义考虑不这样搞，厨房够大但也不能摆上床当卧室


		https://www.houdunren.com/front/video/show?id=12820
	

		 -->

		<main>

			<span>houdunren</span><span>frank </span>


		</main>




	</body>
</html>
